<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat Room</title>
</head>
<body>
<h1>Chat Room:</h1>
<ul id="messages"></ul>
<form id="chat-form">
	<input type="text" name="message" placeholder="Type a message..." required />
	<button type="submit">Send</button>
</form>

<script type="text/javascript">
// 检查浏览器是否支持EventSource
if(typeof(EventSource)!=="undefined") {
    // 创建EventSource实例，建立到服务器的连接
    var source = new EventSource("/chat");
    
    // 监听服务器发送的消息事件
    source.onmessage = function(event) {
        // 创建一个新的li元素
        var li = document.createElement("li");
        // 将服务器发送的数据设置为li元素的文本内容
        li.textContent = event.data;
        // 将li元素添加到页面上的messages元素中
        document.getElementById("messages").appendChild(li);
    };

    // 监听表单的提交事件
    document.getElementById("chat-form").addEventListener("submit", function(event) {
        // 阻止默认的表单提交行为
        event.preventDefault();
        // 创建FormData实例，用于处理表单数据
        var formData = new FormData(event.target);
        
        // 使用fetch API发送POST请求到服务器
        fetch('/send', {
            method: 'POST',
            body: formData,
        }).then(response => {
            // 如果服务器响应成功，重置表单
            if (response.ok) {
                event.target.reset();
            }
        });
    });
} else {
    // 如果浏览器不支持EventSource，显示提示信息
    document.write("Sorry, your browser does not support server-sent events.");
}
</script>
</body>
</html>